<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DOM操作之button</title>
		<style type="text/css">
			.btn{
				padding: 5px 7px;
				border-radius: 3px;
				border: 1px solid #bbb;
				outline: none;
			}
			
			.up{
				background-color: #fff;
				color: #333;
			}
			
			.down{
				background-color: #888;
				color: #fff;
			}
			
		</style>
		
		<script src="js/jquery-1.12.4.js"  type="text/javascript">
			
		</script>
	</head>
	<body>
		<input type="button" class="btn up" name="" id="" value="Click Me" />
		<script type="text/javascript">
			$('.btn').click(function(e){
				// var $btn = $(e.target);
				// // var $btn = $(this);
				// if($btn.hasClass('down')){
				// 	$btn.removeClass('down');
				// }else{
				// 	$btn.addClass('down');
				// }
				
				$(e.target).toggleClass('down');
			});
				
		</script>
	</body>
</html>
